<template>

    <div class="card edit-field">
        <div class="card-body">
            <label for="edit-post" class="form-label">编辑区</label> <!-- //for 属性规定 label 与哪个表单元素绑定。 -->
            <textarea v-model="content" class="form-control" id="edit-post" rows="3"></textarea> <!-- 将textarea中的内容和content绑定 -->
            <button type="button" @click="post_a_post" class="btn btn-primary btn-sm">发帖</button>
       
        </div>
    </div>

</template>

<script>
import {ref} from "vue";
import $ from "jquery";
import { useStore } from "vuex";

export default {
    name: "UserProfileWrite",
    setup(props, context) {
        const store = useStore();
        let content = ref('');

        const post_a_post = () => {
            $.ajax({
                url: "https://app165.acapp.acwing.com.cn/myspace/post/",
                type: "post",
                data:{
                    content:content.value,
                },
                headers: {
                    'Authorization' : "Bearer " + store.state.user.access,
                },
                success(resp) {
                    if (resp.result === "success") {
                        context.emit("post_a_post", content.value)
                        content.value = "";
                    }
                }
            })
        }
        return {
        content,
        post_a_post,
    }
    },
}

</script>

<style scoped>
.edit-field{
    margin-top: 10px;
}

button {
    margin-top: 10px;
}
</style>